<template>
  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" ref="formRef" :rules="rules" :model="form" label-width="200px" label-position="left" class="form-readonly">
      <el-form-item :label="$t('pageStr.enableEmailStr')">
        <el-switch v-model="form.enable_email" active-value="1" inactive-value="0"/>
      </el-form-item>
      <div v-if="form.enable_email == '1'">
        <el-form-item :label="$t('pageStr.emailServerStr')" style="max-width: 500px">
          <el-input v-model="form.mailhub" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.emailAccountStr')" style="max-width: 500px">
          <el-input v-model="form.AuthUser" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.emailPasswordStr')" style="max-width: 500px">
          <el-input v-model="form.AuthPass" type="password" show-password clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.emailSubjectStr')" style="max-width: 500px">
          <el-input v-model="form.subject" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.emailWarningCycleStr')" style="max-width: 500px">
          <el-select v-model="form.warrningCycle" clearable class="w-full">
            <el-option label="1 day" value="1440"></el-option>
            <el-option label="1 hour" value="60"></el-option>
            <el-option label="20 min" value="20"></el-option>
            <el-option label="5 min" value="5"></el-option>
            <el-option label="1 min" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('pageStr.emailWarningContentStr')" style="max-width: 500px">
          <el-checkbox v-model="form.ip" label="IP"/>
          <el-checkbox v-model="form.cpu" label="CPU/Mem"/>
        </el-form-item>
        <el-col :span="24" v-for="item of form.muiltEmail.length">
          <el-form-item :label="$t('pageStr.emailToStr')+'_'+item" style="max-width: 500px">
            <el-input v-model="form.muiltEmail[item - 1]" :maxlength="15">
              <template #suffix>
                <el-icon v-permissionShow v-if="form.muiltEmail.length > 1" color="#E06363" :size="20" style="cursor: pointer"
                         @click="delIpRow(item,form.muiltEmail)">
                  <CloseBold/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="form.muiltEmail.length < 4" :span="24" style="max-width: 300px;margin-left: 200px">
          <el-button style="width: 100%" @click="addIp(form.muiltEmail)">
            <el-icon>
              <Plus/>
            </el-icon>
          </el-button>
        </el-col>
      </div>
    </el-form>
  </el-card>
  <el-button v-permissionShow style="margin-top: 20px;width: 110px;color: #fff" color="#C29B74" @click="handleSubmit">
    {{ $t('tabsStr.applyStr') }}
  </el-button>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue'
import {reqGetMail, reqSetMail} from '@/api/application/mail-set'
import {encrypt, decrypt,permissionDisabled} from '@/utils'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'

const {t} = useI18n()

const form = ref({
  ip: false,
  cpu: false,
  muiltEmail: [''],
  AuthPass: '',
  AuthUser: '',
  FromLineOverride: '',
  emailFrom: '',
  emailTo: '',
  enable_email: '',
  mailhub: '',
  warrningContent: '',
  warrningCycle: '',
  subject: ''
})
const formRef = ref(null)
const rules = {}
onBeforeMount(() => {
  getData()
})

function getData() {
  reqGetMail().then((res) => {
    form.value = res.email
    form.value.muiltEmail = res.email.emailTo?.split(',') || ['']
    form.value.AuthPass = decrypt(res.email.AuthPass || '')
    if (form.value.warrningContent?.includes('ip')) {
      form.value.ip = true
    }
    if (form.value.warrningContent?.includes('cpu')) {
      form.value.cpu = true
    }
    console.log('读取邮件信息', form.value)
  })
}

function addIp(ipArr) {
  if (ipArr.length > 3) {
    ElMessage.warning('最大支持4个地址')
    return
  }
  ipArr.push('')
}

function delIpRow(rowId, ipArr) {
  ipArr.splice(rowId - 1, 1)
}

function handleSubmit() {
  formRef.value.validate((valid) => {
    if (valid) {
      form.value.AuthPass = encrypt(form.value.AuthPass)
      form.value.emailTo = form.value.muiltEmail.join(',')
      let warningArr = []
      if (form.value.ip) {
          warningArr.push('ip')
      }
      if (form.value.cpu) {
        warningArr.push('cpu')
      }

      form.value.warrningContent = warningArr.join(',')
      console.log('应用按钮', form.value)
      reqSetMail(form.value).then(() => {
        ElMessage.success(t('successTip'))
        getData()
      }).catch(() => {
        ElMessage.error(t('errorTip'))
      })
    }
  })
}
</script>

<style scoped>
</style>